<template>
	<view>
		<custom-header title="降级记录" />
		<view class="_wrap">
			<view class="tabs_wrap">
				<view 
					class="list" 
					:class="tab == item.id?'active':''" 
					v-for="(item,index) in tabsList" 
					:key="index"
					@click="handleTab(item)">
					{{ item.name }}
				</view>
			</view>
			<view
				class="no_data" 
				:style="{height:'calc(100vh - 200rpx - '+statusBarHeight+'px)'}"
				v-if="!listData.length && listLoading != 'loading'">
					<view class="icon">
						<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nodata.png" mode=""></image>
					</view>
			</view>
			<scroll-view
				:scroll-y="true" 
				scroll-with-animation
				:style="{height:'calc(100vh - 85rpx - '+statusBarHeight+'px)'}"
				class="scroll_content_wrap"
				v-if="listData.length">
					<view class="list_wrap">
						<view class="list" v-for="(item,index) in listData" :key="index">
							<view class="title_time">
								<view class="title">
									<view class="icon">
										<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/demotion_icon.png" mode=""></image>
									</view>
									<view class="text">降级：1扎</view>
								</view>
								<view class="time">2025-01-22  18:29:29</view>
							</view>
							<view class="table_wrap">
								<view class="tw_head">
									<view class="th name">商品</view>
									<view class="th number">降级数量</view>
									<view class="th price">原单价</view>
									<view class="th price2">结算单价</view>
									<view class="th operation">操作</view>
								</view>
								<view class="tw_body" v-for="(g_item,index) in item.goodList" :key="index">
									<view class="td name ellipsis"> {{ g_item.name }} </view>
									<view class="td number ellipsis">{{ g_item.number }}</view>
									<view class="td price ellipsis">{{ g_item.price }}</view>
									<view class="td price1 ellipsis">{{ g_item.price }}</view>
									<view 
										class="td operation ellipsis" 
										hover-class="custom_hover" 
										:hover-stay-time="200"
										@click="handleDetail(item)"> 查看 </view>
								</view>
							</view>
						</view>
					</view>
			</scroll-view>
			<view class="loading_wrap" v-if="listLoading == 'loading'">
				<up-loadmore
					:status="listLoading"
					iconSize="22"
					iconColor="#FF3316"
					loadingIcon='semicircle'
					loadingText=""
					/>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref , onMounted} from 'vue';
	import { useStore } from 'vuex';
	const store = useStore()
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	const tab = ref(1)
	const tabsList = ref([
		{ id:1,name:'本月' },
		{ id:2,name:'全部' },
	])
	// 选择tabs
	const handleTab = (e)=>{
		console.log(e)
		tab.value = e.id
		loadGetListData()
	}
	
	// 获取列表数据
	const listLoading = ref('loadmore');
	const listData = ref([]);
	const loadGetListData = ()=>{
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(()=>{
			listData.value = [
				{
					id:1,
					goodList:[
						{
							
							id:1,
							name:'卡布奇诺卡布奇诺10枝',
							grade:'E级',
							number:99,
							price:'12.88',
							total:'60.00'
						},
						{
							id:2,
							name:'卡布奇诺10枝',
							grade:'E级',
							number:99,
							price:'12.88',
							total:'60.00'
						},
						{
							id:3,
							name:'卡布奇诺10枝',
							grade:'E级',
							number:99,
							price:'12.88',
							total:'60.00'
						}
					]
				},
				{
					id:1,
					goodList:[
						{
							
							id:1,
							name:'卡布奇诺10枝',
							grade:'E级',
							number:99,
							price:'12.88',
							total:'60.00'
						}
					]
				},
				{
					id:1,
					goodList:[
						{
							
							id:1,
							name:'卡布奇诺10枝',
							grade:'E级',
							number:99,
							price:'12.88',
							total:'60.00'
						},
						{
							id:2,
							name:'卡布奇诺10枝',
							grade:'E级',
							number:99,
							price:'12.88',
							total:'60.00'
						},
						{
							id:3,
							name:'卡布奇诺10枝',
							grade:'E级',
							number:99,
							price:'12.88',
							total:'60.00'
						}
					]
				}
			]
			listLoading.value = 'loadmore'
		},1000);
	};
	const handleDetail = (item)=>{
		uni.navigateTo({
			url:'/pages/demotionDetail/demotionDetail?id='+item.id
		})
	}
	
	
	onMounted(()=>{
		loadGetListData();
	})
	
</script>

<style lang="scss">
	._wrap{
		padding: 0 20rpx;
	}
	.tabs_wrap{
		display: flex;
		height: 82rpx;
		.list{
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			color: #999;
			font-size: 32rpx;
			position: relative;
			&.active{
				color: #333333;
				font-weight: bold;
				&::after{
					content: '';
					width: 28rpx;
					height: 8rpx;
					background: #FF3316;
					border-radius: 8rpx;
					position: absolute;
					bottom: 8rpx;
					left: 50%;
					margin-left: -14rpx;
				}
			}
		}
	}
	.list_wrap{
		padding-bottom: 20rpx;
		.list{
			border-radius: 10rpx;
			background: #FFFFFF;
			padding: 20rpx;
			margin-top: 20rpx;
			.title_time{
				display: flex;
				align-items: center;
				color: #333333;
				justify-content: space-between;
				font-weight: bold;
				.title{
					display: flex;
					align-items: center;
					.icon{
						width: 28rpx;
						height: 26rpx;
						display: flex;
					}
					.text{
						font-size: 28rpx;
						padding-left: 10rpx;
						
					}
				}
				.time{
					font-size: 24rpx;
				}
				
			}
			.total_wrap{
				display: flex;
				justify-content: space-between;
				color: #666666;
				font-size: 24rpx;
				padding-top: 20rpx;
			}
			.table_wrap{
				padding-top: 30rpx;
				.tw_head,.tw_body{
					display: flex;
					justify-content: space-between;
					.th,.td{
						border-radius: 4rpx;
						background: #F3F2FF;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						color: #7672BE;
						font-size: 24rpx;
					}
					.td{
						border: 1px solid #F0F0F0;
						box-sizing: border-box;
						background: #fff;
						color: #666;
						.operation{
							color: #2A82E4;
						}
					}
					.name{
						width: 184rpx;
					}
					.number{
						width: 120rpx;
					}
					.price{
						width: 96rpx;
					}
					.price1{
						width: 120rpx;
					}
					.operation{
						width: 130rpx;
					}
				}
				.tw_body{
					padding-top: 5rpx;
				}
			}
		}
	}
	.no_data{
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx;
		.icon{
			width: 280rpx;
			height: 322rpx;
		}
	}
</style>
